<!doctype html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="javascript" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>${data.pagetitle}</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telphone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <jsp:include page="../comm/comm.jsp"/>
    <style type="text/css">
        body { min-width:320px;background:#fff; font:normal 18px/1.5 helvetica, 微软雅黑, verdana, san-serif;color:#333;}
        *{margin: 0;padding: 0;}
        .header {
            height: 45px;
            width: 100%;
            background-color: #f1130e;
            position: relative;
            line-height: 45px;
            text-align: center;
            color: white;
            font-size: 18px;
            letter-spacing: 2px
        }
        .bj {
            width: 100%;
            height: 74px;
            background-color: white;
            opacity: 0.5;
        }
        .r_header{
            width: 100%;
            height: 74px;
            position: absolute;
            top: 0;
        }
        .r_h_icon{
            width: 23px;
            position: absolute;
            top: 11px;
            left: 20px;
        }
        .r_h_span{
            display: inline-block;
            margin-top: 7px;
            font-size: 21px;
            font-weight: bold;
        }
        .r_c{
            width: 340px;
            height: 115px;
            border: 1px solid #ccc;
            margin: 15px 0px 0px 9px;
            background-color: white;
            border-radius: 5px;
        }
        .r_c_left{
            float: left;
            width: 96px;
            height: 96px;
            margin: 9px;
            background-size: 100%;
        }
        .r_c_right{
            float: right;
            width: 221px;
            height: 96px;
            margin-top: 9px;
            margin-right: 5px;
            font-size: 15px;
        }
        .r_c_name{
            float: left;
        }
        .r_c_bh{
            float: right;
        }
        i {
            font-style: normal;
            color: #f1130e;
        }
        .r_c_dz{
            display: inline-block;
            width: 100px;
            height: 28px;
            border: 1px solid red;
            margin-top: -6px;
        }
        .r_c_dz_icon{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url(/images/kongxin.png);
            background-size: 100%;
            margin: 4px;
        }
        .r_icon_active{
            background-image: url(/images/xin.png);
        }
        .r_c_dz_jilu{
            float: right;
            margin-top: 3px;
            margin-right: 4px;
            color: #f1130e;
        }
        .zhezhao{
            width: 100%;
            height: 100%;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0.3;
        }
        .ts_end{
            width: 80%;
            height: 180px;
            background-color: white;
            position: fixed;
            top: 37%;
            left: 39px;
            z-index: 8888;
            border-radius: 6px;
        }
        .button{
            width: 120px;
            height: 33px;
            border: none;
            background-color: #e40001;
            color: white;
            border-radius: 20px;
            margin: 21px 79px;
            font-size: 16px;
            line-height: 16px;
            outline:none;
        }
    </style>
</head>
<body style="background-image: url(/images/bj.png);background-size: 100%;">
<div class="header">${data.title}投票中</div>

<div style="position: relative;">
    <div class="bj"></div>
    <div class="r_header" style="">
        <p style="font-family: '楷体';color: #f1130e;padding-left: 63px;position: relative;">
            <img class="r_h_icon" src="/images/xin.png" alt="" />
            <span class="r_h_span">${data.title}</span>
        </p>
        <p style="padding-left: 63px;position: relative;">
            <img class="r_h_icon" src="/images/shijian.png" alt="" style="top: 5px;" />
            <span class="r_h_span" style="font-weight: normal;font-size: 14px;">${data.startDate} 至 ${data.endDate} </span>
        </p>
    </div>
</div>

<div style="width: 100%;height: 500px;overflow-x: hidden;overflow-y: auto;">

    <c:forEach items="${list}" var="item">
        <div class="r_content" onclick="detail(${item.id})">
            <div class="r_c">
                <div class="r_c_left">
                    <img src="/upload/${item.headimg}" width="96px" height="96px">
                </div>
                <div class="r_c_right">
                    <p style="overflow: hidden;">
                        <span class="r_c_name">${item.name}</span>
                        <span class="r_c_bh">${item.code}</span>
                    </p>
                    <p style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #666666;font-size: 12px;margin-top: 3px;">
                       ${item.content}
                    </p>
                    <p style="margin-top: 14px;">
                        <span class="r_c_name">目前排名：第<i>${item.order}</i>名</span>
                        <span class="r_c_bh r_c_dz" id="${item.id}">
                             <c:if test="${item.openid==null}">
                                 <span class="r_c_dz_icon"></span>
                                 <span class="r_c_dz_jilu"><i class="leijia" style="font-size: 12px;color: #666666;">${item.num}</i> <i class="dz_jilu">点赞</i></span>
                             </c:if>
                        <c:if test="${item.openid!=null}">
                            <span class="r_c_dz_icon r_icon_active"></span>
                            <span class="r_c_dz_jilu"><i class="leijia" style="font-size: 12px;">${item.num}</i><i class="dz_jilu">已赞</i></span>
                        </c:if>

					</span>
                    </p>
                </div>
            </div>
        </div>
    </c:forEach>



<div class="zhezhao" style="display: none"></div>
<div class="ts_end" style="display: none">
    <p style="margin: 26px;" id="dateString">截止${data.endDate}  <span style="color: #e40001;">活动已结束 !</span></p>
    <p style="color: #888888;margin-left: 77px;margin-top: -8px;font-size: 16px;" id="jqqd">敬请期待</p>
    <button class="button" onclick="closePage()">点击关闭</button>
</div>
</div>
</body>
</html>

<script type="text/javascript">
      isOver('${data.status}','${data.startDate}','${data.endDate}')

    // function dianzan(view,taskId){
    //     if( view.children('.r_c_dz_jilu').children('.dz_jilu').html()=="已赞"){
    //         alert("请勿重复点赞");
    //         return;
    //     }
    //     config.commPost("/tasks/dianzan.json",{taskId:taskId},function (data) {
    //
    //
    //     });
    //     view.children('.r_c_dz_jilu').children('.dz_jilu').html('已赞');
    //     var num = view.children('.r_c_dz_jilu').children('.leijia').text();
    //     num++;
    //     view.children('.r_c_dz_jilu').children('.leijia').text(num);
    //     view.children('.r_c_dz_jilu').children('.leijia').css('color','#f1130e');
    //     view.children('.r_c_dz_icon').addClass('r_icon_active');
    // }

    var  activityId=config.getQueryString("activityId");

    $('.r_c_dz').click(function(){
        if( $(this).children('.r_c_dz_jilu').children('.dz_jilu').html()=="已赞"){
            alert("请勿重复点赞");
            return false;
        }
        var  views=$(this);

        config.commPost("/tasks/dianzan.json",{taskId:$(this).attr("id"),type:"0",activityId:activityId},function (data) {
            views.children('.r_c_dz_jilu').children('.dz_jilu').html('已赞');
            var num = views.children('.r_c_dz_jilu').children('.leijia').text();
            num++;
            views.children('.r_c_dz_jilu').children('.leijia').text(num);
            views.children('.r_c_dz_jilu').children('.leijia').css('color','#f1130e');
            views.children('.r_c_dz_icon').addClass('r_icon_active');
        })

        return false;
    })
    // function getQueryString(name)
    // {
    //     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    //     var r = window.location.search.substr(1).match(reg);
    //     if(r!=null)return  unescape(r[2]); return null;
    // }
  function  detail(id) {
      location.href="/tasks/detail?taskId="+id+"&activityId="+activityId
  }

    //累加

</script>
